<template>
  <!-- 热更管理 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="thermalDataList" @query="getThermalList(true)" @reset="refresh">
        <template v-slot:row></template>
        <template v-slot:actions>
          <el-button type="primary" v-permission="'configService.add'" size="mini" icon="el-icon-plus" 
          @click="(isShowDetails = true),(checkedItem = null)">新增</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getThermalList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{ "" }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="version" label="版本号" width="120" />
          <el-table-column align="center" prop="platform" label="机型" width="120">
            <template slot-scope="scope">
              <el-tag type="primary">{{ scope.row.platform==1?'IOS':'安卓' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="is_close" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_close==1?'info':'success'">{{ scope.row.is_close==1?'关闭':'开启' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="down_url" label="资源地址" />
          <el-table-column align="center" prop="created_at" label="创建时间" width="200" />
          <el-table-column align="center" prop="updated_at" label="修改时间" width="200" />
          <el-table-column align="left" prop="operation" label="操作" width="200">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="'configService.edit'" content="编辑" placement="top-start">
                <el-button size="mini" type="warning" @click.stop="editItem(scope.row)"><i class="el-icon-edit-outline" /></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" v-permission="'configService.delete'" content="删除" placement="top-start">
                <el-button size="mini" type="danger" @click.stop="deleteItem(scope.row)"><i class="el-icon-delete" /></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getThermalList"/>
        </template>
      </search-table>
      <page-details :show="isShowDetails" @onHideDetails="onHideDetails" :data="checkedItem" :channelData="channelData" />
    </div>
  </div>
</template>

<script>
import { throttle } from "@/utils/index";
import { 
  getThermal,
  delThermal,
 } from "@/api/game";
 import {
  GAME_TYPE
} from '@/utils/enum'
import PageDetails from "./page-details.vue";
import SearchTable from "@/components/SearchTable";

export default {
  name: "thermal",
  components: {
    PageDetails,
    SearchTable,
  },
  data () {
    return {
      GAME_TYPE,
      channelData: this.$store.state.commonState.channelDataArray,
      thermalDataList: [],
      checkedItem: null,
      listLoading: false,
      isShowDetails: false,
      currentTotal: 0,
      listQuery: {
        page: 1,
        size: 50,
      },
    };
  },
  created () {
    // this.getThermalList()
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getThermalList()
  },
  methods: {
    // 获取热更列表
    async getThermalList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.thermalDataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      const response = await getThermal(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach((item) => {
            item.isChecked = false;
          });
          that.currentTotal = response.data.total;
          that.thermalDataList = response.data.list;
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false;
    },
    // 编辑
    editItem (row) {
      let that = this;
      that.isShowDetails = true;
      that.checkedItem = row;
      that.handleCurrentChange(row);
    },
    // 删除
    deleteItem (row) {
      let that = this;
      that.handleCurrentChange(row);
      that.$confirm(`是否删除资源地址为【${row.down_url}】热更配置`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
          delThermal({
            id: row.id,
          }).then(function (res) {
            that.getThermalList();
            that.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => { });
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val;
      this.thermalDataList.map((item) => {
        if (item.id === val.id) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      });
    },
    // 隐藏详情
    onHideDetails (show) {
      this.isShowDetails = false;
      if (show) {
        this.getThermalList();
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        game_id:1
      };
      this.getThermalList();
    }, 2000),
  },
};
</script>

<style lang="scss" scoped></style>
